<template>
  <div class="condition-expression">
    <CommonList class="list"
                :items="listData"
                @select="onSelect"
                @use="onUse"
                title=""></CommonList>

    <div class="desc">{{ desc }}</div>
    <div class="buttons">
      <SButton>继续</SButton>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from 'vue';
import CommonList from '../common-list/list.vue';
import SButton from '@/ui-kit/button/button.vue';
import { ListItem } from '../common-list';
import { ProvideKey } from '@/ui-kit/window';
import pluginsStore from '../../../store/plugins';

export default defineComponent({
  name: 'conditions',
  components: { SButton, CommonList },
  emits: [],
  props: ['data'],
  setup(props, { emit }) {
    const listData: ListItem[] = [];
    // fixme 现在仅仅支持从自身检索conditions，需要支持其他bundle的conditions
    const ace: sail.ConditionData[] = pluginsStore().getValidConditions(
      props.data.bundle,
      props.data.filter,
    );
    ace.forEach(item => {
      listData.push({
        label: item.name,
        desc: item.desc,
        group: item.group,
        data: `${props.data.bundle}:${item.id}`, // bundleID:conditionID
      });
    });
    const desc = ref('说明');
    const closeDialog = inject(ProvideKey.CloseWindow, () => {});
    const response = inject(ProvideKey.ResponseCB, (data: string) => {});
    return {
      listData,
      desc,
      onSelect(item: ListItem) {
        desc.value = item.desc;
      },
      onUse(item: ListItem) {
        response(item.data);
        closeDialog();
      },
    };
  },
});
</script>
<style scoped lang="scss">
.condition-expression {
  padding: 5px;
  display: flex;
  flex-direction: column;

  .desc {
    text-align: left;
  }

  .list {
    flex: 1;
  }

  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}
</style>
